<template>
    <div>
      <!--搜索-->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户名">
            <el-input v-model="formInline.userName" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formInline.tel" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onAdd">新增</el-button>
          </el-form-item>
    </el-form>
    <!--显示-->
    <el-table
      :data="userListData.records" stripe border style="width: 100%">
      <el-table-column
        prop="userName"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tel"
        label="手机号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==1" type="success">启用</el-tag>
          <el-tag v-if="scope.row.status==0" type="danger">禁用</el-tag>
        </template>
     
      </el-table-column>
      <el-table-column
        prop="userId"
        label="操作">
        <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button
          size="mini"
          @click="handleRestPwd(scope.$index, scope.row)">修改密码</el-button>
      </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userListData.total">
    </el-pagination>
       <!--弹框详情-->
       <div class="detail">
        <el-drawer
          :before-close="handleClose"
          :visible.sync="dialog"
          direction="rtl"
          custom-class="demo-drawer"
          ref="drawer"
          >
          <div class="demo-drawer__content">
            <el-form :model="form">
              <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.userName"></el-input>
              </el-form-item>
              <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.tel"></el-input>
              </el-form-item>
              <el-form-item label="状态" :label-width="formLabelWidth">
                <el-switch
                  v-model="form.status"
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                  inactive-color="#ff4949">
                </el-switch>

              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
          </div>
</el-drawer>
      </div>
    </div>
 
    </template>
  
  <script>
  export default {
    name: 'user_list',
    methods:{
      onSubmit:function(){
          this.$api.user_list(
          { pageSize:this.pageSize,
            pageNum:this.currentPage,
            data:this.formInline}
          ).then(response => {
            this.userListData = response.data;
          })
        
      },
      onAdd(){
          this.dialog=true;
          this.form = {};
      },
      handleRestPwd(index,row){
        let that = this;
        this.$prompt('请输入密码', '提示', {
          inputType:'password'
        }).then(({ value }) => {
          debugger;
          let user = {
            "password":value,
            "userId":row.userId
          };
          that.$api.user_update_pwd(user)
            .then(response=>{
              this.$message({
                type: 'success',
                message: '更新成功'
              });  
              });
        
      
        }).catch((()=>{}));
      },
      handleDelete(index,row){
        let that = this;
        this.$alert('确认删除', '提示', {
          confirmButtonText: '确定',
          callback:function(action){
            debugger;
            if(action=='confirm'){
              that.$api.user_delete(row.userId);
              that.$message({
                message: '删除成功！',
                type: 'success'
              });
              that.onSubmit();
            }
          } 
        });
       
      },
      handleEdit(index,row){
        this.dialog=true;
        let rowJson = JSON.stringify(row);
        this.form=JSON.parse(rowJson);
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        this.form.tel=null;
        this.form.userName=null;
        clearTimeout(this.timer);
      },
      handleClose(done) {
        if (this.loading) {
          return;
        }
       this.$confirm('确定要提交表单吗？')
        .then(_ => {
          debugger;
          this.loading = true;
          this.$api.user_save(this.form)
            .then(response=>{
              this.cancelForm();
              this.onSubmit();
            });
        }).catch(() => {
          this.cancelForm();
          });
    },

      handleCurrentChange(cpage){
        this.currentPage=cpage;
        this.onSubmit();
      },
      handleSizeChange(size){
        this.pageSize=size;
        this.onSubmit();
      },
   
      loadData:function(){
        this.userListData = this.$api.user_list(this.$data.formInline);
      }
    },
    mounted(){
        this.onSubmit();
      },
    data(){
      return{
        dialog:false,
        loading:false,
        currentPage:1,
        pageSize:10,
        formInline: {

        },
        userListData: {
          records:[],
          current:1,
          total:0
        },
        form: {
          userName:'',
          tel:''
        },
      formLabelWidth: '80px',
      timer: null,
      }

    },
    created:function(){
  
    }
  }
  </script>